.list1 {
  .item {
    position: relative;
  }
  // 垂直布局样式
  .img {
    image {
      border-radius: 12px 12px 0px 0px;
    }
  }
  .text-area {
    padding: 20rpx 23rpx 32rpx;
    background-color: #fff;
    .title {
      font-weight: bold;
      color: $primary-third-color;
      @include two-line;
    }
    .price-box {
      @include flex-center-between;
      .price {
        display: flex;
        align-items: baseline;
        margin-top: 19rpx;
        view {
          color: $primary-main-color;
          font-weight: Bold;
        }
        .unit {
          font-size: 24rpx;
        }
        .num {
          font-size: 32rpx;
        }
      }
      .sales {
        color: $primary-second-color;
        font-size: 21rpx;
        font-family: $font-PF-Regular;
      }
    }
    .tags {
      @include flex-center;
      margin-top: 10rpx;
      view {
        font-family: $font-PF-Bold;
        font-weight: bold;
        font-size: 22rpx;
        color: $primary-main-color;
        padding: 2rpx 4rpx;
        border: 1rpx solid $primary-main-color;
        border-radius: 6rpx;
        &:first-child {
          margin-right: 7rpx;
        }
      }
    }
    .action {
      @include flex-center;
      margin-top: 19rpx;
      .btn {
        @include flex-center;
        view {
          color: $primary-second-color;
          font-family: $font-PF-Regular;
          font-size: 24rpx;
        }
        &:first-child {
          margin-right: 20rpx;
        }
      }
      .del image {
        width: 21rpx;
        height: 23rpx;
      }
      .share image {
        width: 21rpx;
        height: 21rpx;
      }
      .sales {
        color: $primary-second-color;
        font-size: 21rpx;
        font-family: $font-PF-Regular;
      }
    }
  }

  // 水平布局样式
  &.horizontal {
    .item {
      @include flex-center;
    }
    .img {
      image {
        border-radius: 12px 0px 0px 12px;
      }
    }
    .text-area {
      padding: 0 28rpx 0 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 26rpx;
      }
      .price-box {
        .price {
          margin-top: 10rpx;
        }
      }
      .tags {
        margin-top: 0;
      }
      .action {
        margin-top: 10rpx;
        .sales {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
}

